<template>
  <div class="app-config" style="display: flex">
    <div style="width: 25%"
      ><je-qrcode class="qr-code" :value="qrcodeData.value" :size="qrcodeData.size"
    /></div>
    <div style="width: 75%">
      <je-menu-item
        v-for="item_ in AppConfig[0].children"
        :key="item_.key"
        style="width: 33%; display: inline-block"
        @click="clickMenu(item_)"
      >
        <i :class="item_.icon" :style="`color: ${item_.color};margin-right: 5px`"></i
        >{{ item_.text }}
      </je-menu-item>
    </div>
  </div>
</template>
<script>
  import { Menu, Qrcode, Modal } from '@jecloud/ui';
  import { defineComponent, reactive } from 'vue';
  import { AppConfig } from '@/views/config/hooks/menu-config';
  import { useGlobalStore } from '@common/store/global-store';
  import { getAxiosBaseURL } from '@jecloud/utils';
  import { useFuncConfig } from '@/hooks/use-func-config';
  export default defineComponent({
    name: 'FuncConfigMenu',
    components: {
      JeMenuItem: Menu.Item,
      JeQrcode: Qrcode,
    },
    props: {
      funcConfig: Object,
    },
    emits: ['hideAppConfig'],
    setup(props, { emit }) {
      const getQrcodeObject = () => {
        const { token } = useGlobalStore();
        const origin = getAxiosBaseURL() || window.location.origin;
        return `${origin}/app/micro/func/#/pages/func/data/${props.funcConfig.funcCode}?authorization=${token}`;
      };
      const qrcodeData = reactive({
        value: getQrcodeObject(),
        size: 65,
      });
      const clickMenu = (item) => {
        if (props.funcConfig) {
          const { showFuncConfig } = useFuncConfig();
          const { funcId, funcType } = props.funcConfig;
          if (['FUNC', 'TREE', 'VIEW'].includes(funcType)) {
            showFuncConfig({ key: item.key, funcId, origin: 'app' });
          } else {
            Modal.alert('请选择功能！', 'info');
            return false;
          }
        }
        emit('hideAppConfig', item);
      };
      return { AppConfig, clickMenu, qrcodeData };
    },
  });
</script>
<style lang="less" scoped>
  .app-config {
    width: 100%;
    padding: 10px 0;
    .title {
      width: 100%;
      height: 40px;
      line-height: 40px;
      padding-left: 40px;
      font-weight: Bold;
      color: #333333;
    }
    .qr-code {
      width: 65px;
      height: 65px;
      margin-left: 30px;
      border: 1px solid #e6e6e6;
    }
    .ant-dropdown-menu-item-icon {
      font-size: 14px !important;
    }
  }
</style>
